import { SideBar, Image } from 'antd-mobile'
import { AddCircleOutline, MinusCircleOutline } from 'antd-mobile-icons'

import './CommodityList.scss'
import { type CategoryItem, type Commodity } from '../../../../../api/shops'
import { useDispatch, useSelector } from 'react-redux'
import { addCartList, disCartList } from '../../../../../store/modules/cart'
import type { RootState } from '../../../../../store'



type obj = {
    shopCategory: CategoryItem[],
    shopCommodity: Commodity[],
    changeType(category_id: string): void,
    activeCategoryId: string,
    shops_id: string,
}
const CommodityList = ({  shops_id, shopCategory, shopCommodity, activeCategoryId, changeType }: obj) => {

    const dispatch = useDispatch()
    const cart = useSelector((state: RootState) => {
        return state.cart.cartShop[shops_id]
    })
    
    const getCartItemCount = (id: string) => {
        console.log(cart)
        if (cart) {
            const index = cart.findIndex((item) => {
                return item._id === id
            })
            console.log(index)
            if (index !== -1) {
                return cart[index].count
            }
        }
        return 0

    }

    const addCart = (item: Commodity) => {
        dispatch(addCartList({ commodity: item, shops_id: shops_id }))

    }

    const disCart = (commodity_id: string) => {
        dispatch(disCartList({ shops_id, commodity_id }))
    }


    return <div className="ProductList">
        <div className="left">
            <SideBar className="sideBar" activeKey={activeCategoryId} onChange={(e) => changeType(e)}>
                {shopCategory.map(item => (
                    <SideBar.Item key={item._id} title={item.name} />
                ))}
            </SideBar>

        </div>
        <div className="right">
            {
                shopCommodity.map(item => (
                    <div className="shopItem" key={item._id}>
                        <div className="commodity_avatar">
                            <Image src={item.imgUrl} style={{ borderRadius: 10 }} width={110} height={110} />
                        </div>
                        <div className="product">
                            <div className="title">{item.name}</div>
                            <div className="detail">{item.desc}</div>
                            <div className="sales_discount">
                                <div className="discount">{item.discount * 10}折</div>
                                <div className="sales">月售{item.month_sell_count}+</div>
                            </div>
                            <div className="price">
                                <span>{item.price}</span>折后价{item.discount_price}￥
                            </div>
                            <div className="minus_add" >
                                <div className="minus" onClick={() => disCart(item._id)}>
                                    <MinusCircleOutline color="blue" width={20} height={20} />
                                </div>
                                <div>{getCartItemCount(item._id)}</div>
                                <div className="add"
                                    onClick={() => addCart(item)}
                                >
                                    <AddCircleOutline color="#ED7C3C" width={20} height={20} />
                                </div>
                            </div>
                        </div>

                    </div>
                ))
            }

        </div>
    </div>
}

export { CommodityList }